.header{
	height: 60px;
	line-height: 60px;
	background: $bg-color;
	color: $text-color-level1;
	border-bottom: 1px solid $line-color;
	overflow: hidden;
	.navContainer{
		flex-grow: 1;
		overscroll-behavior-y:contain;
		.navScrollBox{
			color: $text-color-level1;
			flex-grow: 1;
			li{
				cursor: pointer;
				&:hover{
					color: $primary-color;
				}
			}
		}
		.navUser{
			color: $text-color-level1;
			justify-content: flex-end;
			min-width: 180px;
			li{
				cursor: pointer;
				img{
					height: 20px;
				}
			}
			.headerMenuBtn{
				width: 15px;
				justify-content:center;
				flex-direction:column;
				b{
					display: inline-block;
					width: 100%;
					height: 1px;
					background-color: $text-color-level1;
					position: relative;
					&::before{
						content: '';
						position: absolute;
						left: 0;
						right:0;
						top:-6px;
						height: 1px;
						background-color: $text-color-level1;
					}
					&::after{
						content: '';
						position: absolute;
						left: 0;
						right:0;
						bottom:-6px;
						height: 1px;
						background-color: $text-color-level1;
					}
				}
				&.menuDark{
					color: red;
				}
				&.menuLight{
					color: green;
				}
			}
		}
		.line{
			color: $icon-color;
			opacity: 0.5;
			cursor: inherit !important;
		}
	}
}

.logoContainer h1{
	font-size: 0;
	cursor: pointer;
}
.logoContainer h1 img{
	height: 22px;
}
.logoContainer .more{
	font-size: 0;
	cursor: pointer;
}
.logoContainer .morePoper{
	inset:60px auto auto 135px !important;
}
.arrow{
	background-size: 11px 11px;
	background-position: right center;
	background-repeat: no-repeat;
	&.dark{
		background-image: url('~@assets/images/icon/arrow-down-light.svg');
	}
	&.light{
		background-image: url('~@assets/images/icon/arrow-down-dark.svg');
	}
}